<template>
  <div>
    <PageHeader hidden-breadcrumb>
        <template #title><div class="demo-title">用户列表</div></template>
        <template #content>
          <div class="demo-content">包含用户信息的列表，带有常规操作。</div>
        </template>
    </PageHeader>
    
    <Row style="margin:20px;" :gutter="10">
        <Card style="width:100%">
            <List item-layout="vertical">
                <ListItem v-for="item in data" :key="item.title">
                    <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description" />
                    {{ item.content }}
                    <template #action>
                        <li>
                            <Icon type="ios-star-outline" /> 123
                        </li>
                        <li>
                            <Icon type="ios-thumbs-up-outline" /> 234
                        </li>
                        <li>
                            <Icon type="ios-chatbubbles-outline" /> 345
                        </li>
                    </template>
                    <template #extra>
                        <img src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large" style="width: 280px">
                    </template>
                </ListItem>
            </List>
            <div class="ivu-mt ivu-text-center">
                <Page :total="100" show-sizer />
            </div>
        </Card>
    </Row>
   

    
  </div>
</template>

<script>
export default {
    data () {
        return {
            data: [
                {
                    title: 'This is title 1',
                    description: 'This is description, this is description, this is description.',
                    avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                    content: 'This is the content, this is the content, this is the content, this is the content.'
                },
                {
                    title: 'This is title 2',
                    description: 'This is description, this is description, this is description.',
                    avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                    content: 'This is the content, this is the content, this is the content, this is the content.'
                },
                {
                    title: 'This is title 3',
                    description: 'This is description, this is description, this is description.',
                    avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                    content: 'This is the content, this is the content, this is the content, this is the content.'
                }
            ]
        }
    },
    methods: {
        
    }
}
</script>
<style scoped>

</style>
